<template>
  <div>
    <h2>循环遍历指令</h2>
    <ul>
      <!-- 循环遍历的时候，必须加 :key 属性，属性值不能重复
      1. 保持列表的状态，在删除、排序、添加等等操作之后，列表的状态不会错乱 
      2. 加入key可以使页面 更新更快
      -->
      <!-- 如果不需要用index下标，则index可以不写，写成 v-for="item in list' -->
      <li v-for="(item,index) in list" :key="item.id">
        <input type="checkbox" name="" id="">
        {{index}}--{{item.id}}--{{item.name}}
        <button @click="del(item.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
       list:[
        {id:2,name:'宋江'},
        { id: 3, name: '吴用' },
        { id: 5, name: '林冲' },
        { id: 7, name: '花荣' },
        { id: 8, name: '鲁达' },
        { id: 9, name: '武松' }
       ]
    }
  },
  methods:{
    del(id){
      // console.log('删除,id是：',id);
      this.list = this.list.filter(item =>{
        return item.id !== id
      })
    }
  }
  
}
</script>

<style>
 
</style>